<template>
  <div>
    <div>
      <el-button type="success" @click="openAddDialog()">
        新增楼栋
        <el-icon>
          <Plus/>
        </el-icon>
      </el-button>
      <el-button :aria-disabled="single" type="warning" @click="openUpdateDialog()">
        修改楼栋
        <el-icon>
          <Position/>
        </el-icon>
      </el-button>
      <el-button type="danger" @click="deleteDeptAll()">
        删除楼栋
        <el-icon>
          <Close/>
        </el-icon>
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="Id" fit/>
      <el-table-column prop="name" label="楼栋名称" fit/>
      <el-table-column fixed="right" label="操作" fit>
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openUpdateDialog(scope.row)">
            修改
          </el-button>
          <el-button link type="primary" size="small" @click="deleteDept(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" @current-change="handelCurrentChange" :total="total"/>
    </div>
    <div>
      <Add :get-dialog="addDialog" @close="close()"></Add>
      <Update :get-dialog="updateDialog" :get-info="tableInfo" @close="close()"></Update>
    </div>
  </div>
</template>

<script>

import {Plus, Position, Close} from "@element-plus/icons";
import Add from "@/components/dept/add";
import Update from "@/components/dept/update";
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "table",
  components: {
    Update,
    Add,
    Plus, Position, Close
  },
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  watch: {
    'search.name': {
      handler(val) {
        this.form.name = val
        this.getData()
      },
      deep: true
    }
  },
  data() {
    return {
      addDialog: false,
      updateDialog: false,
      form: {
        name: undefined,
        start: 0,
        end: 10
      },
      total: 11,
      tableData: [],
      tableInfo: {},
      checkTable: [],
      ids: [],
      single: true,
      // 非多个禁用
      multiple: true,
    }
  },
  methods: {
    handelCurrentChange(value) {
      let data = this.form
      data.start = (value - 1) * 10
      this.getDept(data)
    },
    getData() {
      let data = this.form
      data.start = 0
      data.end = 10
      this.getDept(data)
    },
    getDept(data) {
      axios({
        url: `http://localhost:8888/dept/list`,
        method: "post",
        data: data
      }).then((res) => {
        this.tableData = res.data
      })
    },
    deleteDept(data) {
      axios({
        url: `http://localhost:8888/dept/delete/` + data.id,
        method: "delete"
      }).then((res) => {
        if (res.data) {
          ElMessage({
            message: "删除成功",
            type: "success"
          })
          this.$router.go(0)
        } else {
          ElMessage({
            message: "删除失败",
            type: "warning"
          })
        }
      })
    },
    deleteDeptAll() {
      axios({
        url: `http://localhost:8888/dept/delete/` + this.ids,
        method: "delete"
      }).then((res) => {
        if (res.data) {
          ElMessage({
            message: "删除成功",
            type: "success"
          })
          this.$router.go(0)
        } else {
          ElMessage({
            message: "删除失败",
            type: "warning"
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    openAddDialog() {
      this.addDialog = true
    },
    openUpdateDialog(data) {
      if (data == null) {
        ElMessage({
          message: "请选择单个修改的内容",
          type: "warning"
        })
      } else {
        this.tableInfo = data
        this.updateDialog = true
      }

    },
    close(value) {
      this.addDialog = value
      this.updateDialog = value
      this.getData()
    }
  },
  mounted() {
    this.getData()
    let data = {
      start: 0,
      end: 1000
    }
    axios({
      url: `http://localhost:8888/dept/list`,
      method: "post",
      data: data
    }).then((res) => {
      this.total = res.data.length
    })
  }
}
</script>

<style scoped>

::v-deep .example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-bottom: 16px;
}

::v-deep .example-demonstration {
  margin-bottom: 16px;
}

</style>